<template>
    <Category :flagCard="flagCard"></Category>
    <el-card class="box-card">
        <div v-show="flagCard === 0">
            <el-button @click="addNewSpu" :disabled="cateStor.C3Id ? false : true" icon="Plus"
                type="primary">添加SPU</el-button>
            <el-table :data="tableData" border style="width: 100% ;margin: 20px 0;">
                <el-table-column type="index" label="序号" width="90" />
                <el-table-column prop="spuName" label="SPU名称" />
                <el-table-column prop="description" label="SPU描述" />
                <el-table-column label="SPU操作">
                    <template #="{ row }">
                        <el-button @click="toSKU(row)" title="添加SKU" size="small" icon="Plus" type="primary"></el-button>
                        <el-button @click="editSpu(row)" title="修改SPU" size="small" icon="Edit" type="primary"></el-button>
                        <el-button @click="findSku(row)" size="small" title="查看SKU列表" icon="View"
                            type="primary"></el-button>
                        <el-popconfirm :title="`你确定删除${row.spuName}?`" @confirm="confirmEvent(row)">
                            <template #reference>
                                <el-button size="small" title="删除SPU" icon="Delete" type="primary"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 5, 9, 15]"
                layout=" prev, pager, next, jumper,->, sizes,total" :total="total" @size-change="getSPUData()"
                @current-change="getSPUData" />
        </div>
        <Addspu ref="addspu" @changeFlagCard="changeFlagCard" v-show="flagCard === 1"></Addspu>
        <Addsku ref="addsku" @changeFlagCard="changeFlagCard" v-show="flagCard === 2"></Addsku>
    </el-card>
    <el-dialog v-model="dialogVisible" title="SKU列表" width="30%">
        <el-table border :data="skuArr">
            <el-table-column label="SKU名字" prop="skuName"></el-table-column>
            <el-table-column label="SKU价格" prop="price"></el-table-column>
            <el-table-column label="SKU重量" prop="weight"></el-table-column>
            <el-table-column label="SKU图片">
                <template #="{ row }">
                    <img :src="row.skuDefaultImg" style="width:100px;height: 100px;">
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script setup lang="ts">
import Category from '@/components/category/index.vue';
import { onBeforeUnmount, ref, watch } from 'vue'
import categoryStore from '@/store/modules/category';
import { productSpu, reqSkuList, reqRemoveSpu } from '@/api/product/spu'
import type { SpuValue, ReturnSUP, SkuAdd, SpuData } from '@/api/product/spu/type'
import Addspu from './components/addSpu/index.vue'
import Addsku from './components/addSku/index.vue'
import { ElMessage } from 'element-plus'
// 库
const cateStor = categoryStore()
const flagCard = ref<number>(0)
const tableData = ref<SpuValue[]>([])
const pageNo = ref<number>(1)
const pageSize = ref<number>(5)
const total = ref<number>(0)
// 弹窗
const dialogVisible = ref<boolean>(false)
// 组件实例
const addspu = ref()
const addsku = ref()
// SKU数据
const skuArr = ref<SkuAdd[]>([])
// 监听分类三id
watch(() => cateStor.C3Id, () => {
    getSPUData()
})
// 获取SPU展示数据列表
const getSPUData = async (page: number = 1) => {
    pageNo.value = page
    const data: ReturnSUP = await productSpu(pageNo.value, pageSize.value, cateStor.C3Id)
    if (data.code == 200) {
        tableData.value = data.data.records
        total.value = data.data.total
    }
}
// 子组件给父组件通讯
const changeFlagCard = (obj: any) => {
    flagCard.value = obj.flagCard
    if (obj.pageNo == 1) {
        getSPUData()
    } else {
        getSPUData(pageNo.value)

    }
}
// 编辑spu
const editSpu = (row: SpuValue) => {
    flagCard.value = 1
    addspu.value.info(row)
}
// 新增spu
const addNewSpu = () => {
    flagCard.value = 1
    addspu.value.newSpu(cateStor.C3Id)
}
// 重置pinia
onBeforeUnmount(() => {
    cateStor.$reset()
})
// 跳转sku新增页面
const toSKU = (row: SpuValue) => {
    flagCard.value = 2
    const { C1Id, C2Id, C3Id } = cateStor
    addsku.value.info(C1Id, C2Id, C3Id, row)
}
// 弹窗 获取
const findSku = async (row: SpuData) => {
    dialogVisible.value = true
    const data = await reqSkuList(row.id as number)
    if (data.code === 200) {
        skuArr.value = data.data
    }
}
// 确定删除spu
const confirmEvent = async (row: SpuData) => {
    const data = await reqRemoveSpu(row.id as number)
    if (data.code == 200) {
        ElMessage.success('删除成功！')
        getSPUData(tableData.value.length > 1 ? pageNo.value : pageNo.value - 1)
    } else {
        ElMessage.error("删除失败！")
    }
}

</script>
<script lang="ts">
export default {
    name: 'Spu'
}
</script>
<style scoped lang="scss">
.box-card {
    margin-bottom: 20px;
}
</style>